import { FC, useEffect } from "react";
import { IconFont } from "../../../utils/iconfont/icon";
import styles from "./playerComponent.module.css";
import { Button, Radio, Spin, Skeleton, Statistic } from "antd";
import { useDispatch } from "react-redux";
import { BrowserRouter, Route, Switch, useHistory } from "react-router-dom";
import { Tabs } from "antd";
// import { Input } from "antd";
// import { SearchOutlined } from "@ant-design/icons";
import { useSelector } from "../../../redux/hooks";
import { getPlaylist, getUserDetail } from "../../../redux/userInfo/slice";
import { getsongList, getMvUrl } from "../../../redux/list/slice";
import {
  CaretRightOutlined,
  DownloadOutlined,
  FolderAddOutlined,
  ShareAltOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";
import mayixuejie from "../../../assest/mayixuejie.jpg";
import Progress from "../../Process-bar";
const PlayerComponent = (props: any) => {
  const { TabPane } = Tabs;
  const history = useHistory();
  // const { playlist } = useSelector((s) => s.listDetail);
  const { musicName, musicCreator, ava, data, songUrl } = useSelector(
    (s) => s.musicInfoSlice
  );
  const dispatch = useDispatch();
  const { songList } = props;

  function callback(key) {
    console.log(key);
  }

  return (
    <div className={styles.page}>
      <div className={styles.page_left}>
        <div className={styles.imgBox}>
          {ava ? <img src={ava} alt="" /> : <img src={mayixuejie} alt="" />}
        </div>
        <div className={styles.imgRight}>
          {" "}
          <div className={styles.music_title}>
            {musicName ? musicName : "网易云音乐"}
          </div>
          <div className={styles.music_creator}>
            {musicCreator ? musicCreator : "IDONTKNOW"}
          </div>
        </div>
      </div>
      <div className={styles.page_mid}>
        <div className={styles.page_mid_top}></div>
        <div
          onClick={() => {
            console.log(data["dt"]);
          }}
        >
          <Progress url={songUrl} time={data ? data["dt"] : "0"} />
        </div>
      </div>
    </div>
  );
};

export default PlayerComponent;
